<template>
    <body>
        <div style="padding: 10px;">
            <van-row type="flex" justify="space-between">
                <van-col span="18">
                    <van-search v-model="products" shape="round" placeholder="商品搜索" @focus="Jump" />
                </van-col>

                <van-col span="6" style="height: 54px; line-height: 54px;">
                    郑州市 <van-icon name="arrow-down" />
                </van-col>
            </van-row>

            <van-swipe style="margin: 10px 0px;">
                <van-swipe-item v-for="item in arr">
                    <img :src="item.image_url" alt="" width="100%"></van-swipe-item>
            </van-swipe>
            <!--   跳转居家  分类 -->
            <van-row>
                <van-row type="flex" justify="space-around">
                    <div v-for="(item, index) in channel" @click="skip(index)">
                        <img :src="item.icon_url" alt="">
                        <p style="text-align: center;">{{ item.name }}</p>
                    </div>
                </van-row>
            </van-row>

        </div>
        <h3 style="text-align: center; margin: 20px 0px;">品牌制造商直供</h3>
        <van-row type="flex" justify="space-around">
            <van-col span="12" id="box2" v-for="item in brandList">
                <van-image fit="contain" style="width: 100%;" :src="item.new_pic_url" />
                <h5 id="one">{{ item.name }}</h5>
                <p id="two">{{ item.floor_price }}元起</p>
            </van-col>
        </van-row>
        <!-- 新品首发 -->
        <van-image fit="contain" style="width: 100%; margin: 20px 0px;"
            src="http://jinglins.gitee.io/bufan-tesco-mall/assets/new-product-pic-ab17c35e.png" @click="popularity" />
        <!--  -->
        <div class="box3">
            <div style="display: flex; flex-wrap: nowrap; width: 150vw;">
                <van-col v-for="item in newGoods">
                    <van-image fit="contain" style="width: 100%;" :src="item.list_pic_url" @click="crawl(item)" />
                    <h4>
                        {{ item.name }}</h4>
                    <p>
                        {{ item.goods_brief }}</p>
                    <span style="color: rgb(133, 6, 6); margin: 0px 10px;">¥ {{ item.retail_price }}</span>
                </van-col>
            </div>
        </div>
        <!-- 人气推荐 -->
        <van-image fit="contain" style="width: 100%; margin: 30px 0px;"
            src="http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-recom-pic-743969c3.png" @click="popularity" />


        <div class="box3">
            <div style="display: flex; flex-wrap: nowrap; width: 150vw;">
                <van-col v-for="item in hotGoods">
                    <van-image fit="contain" style="width: 100%;" :src="item.list_pic_url" />
                    <h4>
                        {{ item.name }}</h4>
                    <p>
                        {{ item.goods_brief }}</p>
                    <span style="color: rgb(133, 6, 6); margin: 0px 10px;">¥ {{ item.retail_price }}</span>
                </van-col>
            </div>
        </div>

        <h3 style="text-align: center; margin: 20px 0px;">专题精选</h3>


        <div style="width: 100vw; overflow-x: auto;">
            <van-row type="flex" style="flex-wrap: nowrap;">
                <van-col v-for="item in topicList">
                    <div style="width: 70vw;">
                        <!-- 抓取数据 -->
                        <van-image fit="fill" :src="item.item_pic_url" style="height: 20vh; width: 75vw;" />
                        <div id="crate">
                            <h4>{{ item.title }} </h4>
                            <span>{{ item.price_info }}元起</span>
                        </div>
                        <p>{{ item.subtitle }}</p>
                    </div>
                </van-col>
            </van-row>
        </div>


        <van-row type="flex" justify="space-around" v-for="item in newCategoryList">
            <h4 style="text-align: center;position: absolute;"><span class="span1">{{ item.name }}</span>好物</h4>
            <van-col span="12" v-for="index in item.goodsList" id="Closure">
                <van-image fit="fill" :src="index.list_pic_url" @click="JapaneseSofa(index)" />
                <p>{{ index.name }}</p>
                <span>¥{{ index.retail_price }}</span>
            </van-col>
            <van-col span="12" style="display: flex; flex-direction:column; justify-content: center; align-items:center">
                <p>{{ item.name }}好物</p>
                <van-icon name="share-o" />
            </van-col>
        </van-row>
        <br>
        <br>
        <br>
        <br>
    </body>
</template>

<script>

import { getLogin, DetailsPage } from "@/api/Home/index";
//import bus from "@/eventBus";//中间件
export default {
    name: 'BusinessHome',

    data() {
        return {
            products: '',        //收索关键词  	
            arr: [],             //轮播 数据
            channel: [],        //轮播下面组件
            brandList: [],       //品牌商家直供
            hotGoods: [],           //坐垫
            newGoods: [],     //蚕丝被数据
            topicList: [],    //专题精选  
            newCategoryList: {},
            //请求跳转轮播图数据饿
            messAge: []
        };
    },

    mounted() {

    },

    methods: {
        //请求跳转轮播图数据饿
        async beg(Id, openId) {
            const { data: res } = await DetailsPage(Id, openId)
            sessionStorage.setItem('Stuff', JSON.stringify(res))

            // this.messAge = res
            // console.log(this.messAge);
        },
        Jump() {
            this.$router.replace('/search')
        },
        skip() {
            this.$router.replace('/kitchen')
        },
        crawl(item) {
            // bus.$emit("toFooter", item.goods_desc)
            //使用this.$router.push方法传递参数进行跳转：
            console.log(item);
            this.beg(item.id, '66')

            //调用请求数据方法
            sessionStorage.setItem('list', item.goods_desc)

            this.$router.push({ path: '/ProductJump', query: { id: item.id } });
        },

        JapaneseSofa(index) {
            console.log(index.id);
            this.beg(index.id, '66')

            this.$router.push({ path: '/HomeGoodies', query: { id: index.id } });
        },

        //人气跳转图片
        popularity() {
            this.$router.replace('/Newhotlist')
        }
    },
    created() {
        getLogin().then(res => {
            console.log(res);
            this.arr = res.data.banner
            this.channel = res.data.channel
            this.brandList = res.data.brandList
            this.hotGoods = res.data.hotGoods
            this.newGoods = res.data.newGoods
            this.topicList = res.data.topicList
            this.newCategoryList = res.data.newCategoryList
        });

        // getLogin({
        //     isHot: 1,
        //     isNew: "",
        //     order: "asc"
        // })
        //     .then(res => {
        //         console.log(res)
        //     })
    }
}
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

#box2 {
    position: relative;
    padding: 0 5px;
}

#one {
    position: absolute;
    top: 20%;
    left: 10%;
}

#two {
    position: absolute;
    top: 35%;
    left: 10%;
    font-size: 14px;
    color: #c8c9cc;
}

.box3 {
    width: 100vw;
    overflow-x: auto;
}

.box3 p,
.box3 h4 {
    width: 100px;
    margin: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box3 p {
    font-size: 14px;
    color: #c8c9cc;
    margin-bottom: 15px;
}

#crate h4 {
    width: 60%;
    display: inline-block;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 400;

}

#crate span {
    font-size: 10px;
    float: right;
    color: brown;
    padding: 0 10px;
}

#crate+p {
    font-size: 10px;
    width: 30%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#Closure p {
    font-size: 12px;
}

#Closure span {
    font-size: 12px;
    color: brown;
}
</style>